<template>
  <!--容器-->
  <div class="section">
    <div class="home-container w-container">
      <!--顶部图标-->
      <div class="home-tabs-wrap">
        <div class="w-tabs">
          <!--顶部图标-->
          <div class="tabs-menu-home w-tab-menu" role="tablist">
            <!--通过showProgressBar值判断是否添加进度条-->
            <a
              :class="[
                'tab-button',
                'w-inline-block',
                'w-tab-link',
                showProgressBar === 0 ? 'tab-button-active' : '',
              ]"
              href="#"
              ><div class="iconfont icon-zhuzhuangtu1 fa_icon_reg"></div>
              <div>Datasets</div>
              <div class="load-bar-base">
                <div
                  class="load-bar"
                  v-if="showProgressBar === 0"
                  :style="{ width: progress + '%' }"
                ></div></div></a
            ><a
              :class="[
                'tab-button',
                'w-inline-block',
                'w-tab-link',
                showProgressBar === 1 ? 'tab-button-active' : '',
              ]"
              href="#"
              ><div class="iconfont icon-agile_modeling fa_icon_reg"></div>
              <div>Labeling</div>
              <div class="load-bar-base">
                <div
                  class="load-bar"
                  v-if="showProgressBar === 1"
                  :style="{ width: progress + '%' }"
                ></div></div></a
            ><a
              :class="[
                'tab-button',
                'w-inline-block',
                'w-tab-link',
                showProgressBar === 2 ? 'tab-button-active' : '',
              ]"
              href="#"
              ><div class="iconfont icon-ico fa_icon_reg"></div>
              <div>Models</div>
              <div class="load-bar-base">
                <div
                  class="load-bar"
                  v-if="showProgressBar === 2"
                  :style="{ width: progress + '%' }"
                ></div></div></a
            ><a
              :class="[
                'tab-button',
                'w-inline-block',
                'w-tab-link',
                showProgressBar === 3 ? 'tab-button-active' : '',
              ]"
              href="#"
              ><div class="iconfont icon-huojian fa_icon_reg"></div>
              <div>Deployment</div>
              <div class="load-bar-base">
                <div
                  class="load-bar"
                  v-if="showProgressBar === 3"
                  :style="{ width: progress + '%' }"
                ></div></div></a
            ><a
              :class="[
                'tab-button',
                'w-inline-block',
                'w-tab-link',
                showProgressBar === 4 ? 'tab-button-active' : '',
              ]"
              href="#"
              ><div class="iconfont icon-quanbu fa_icon_reg"></div>
              <div>Collaboration</div>
              <div class="load-bar-base">
                <div
                  class="load-bar"
                  v-if="showProgressBar === 4"
                  :style="{ width: progress + '%' }"
                ></div></div
            ></a>
          </div>
        </div>
      </div>
      <!--视频+文字-->
      <div class="tabs-content-2 w-tab-content">
        <div class="tab-panel">
          <div class="w-layout-grid tab-grid">
            <!--视频-->
            <div class="img-block">
              <div class="hero-widget-container-edit">
                <div class="video">
                  <!--调用视频轮播组件，通过父子传值传递视频路径、高度、宽度-->
                  <VideoCarousel
                    :videos="videoPaths"
                    :key="refreshKey"
                    :parentWidth="width"
                    :parentHeight="height"
                  ></VideoCarousel>
                </div>
              </div>
            </div>
            <!--文字-->
            <div class="content-block">
              <!--标题文字-->
              <h2 class="tab-card-heading">
                Deploy custom and foundation models in minutes
              </h2>
              <div class="iconbullet-wrap">
                <!--图标-->
                <div class="icon-bullet-box">
                  <div class="icon-xuanzhuan iconfont"></div>
                </div>
                <!--文字-->
                <div class="icon-bullet-text-wrap">
                  <div class="icon-bullet-li">
                    Managed infrastructure to use your custom model or a
                    foundation model as a <strong>hosted API endpoint</strong>
                  </div>
                </div>
              </div>
              <div class="iconbullet-wrap">
                <div class="icon-bullet-box">
                  <div class="iconfont icon-dui"></div>
                </div>
                <div class="icon-bullet-text-wrap">
                  <div class="icon-bullet-li">
                    <strong>Deploy anywhere</strong> including NVIDIA Jetson,
                    iOS, OAK cameras, Raspberry Pi, the browser, your own cloud,
                    and more
                  </div>
                </div>
              </div>
              <div class="iconbullet-wrap">
                <div class="icon-bullet-box">
                  <div class="iconfont icon-xingquan"></div>
                </div>
                <div class="icon-bullet-text-wrap">
                  <div class="icon-bullet-li">
                    <strong>Device-optimized containers</strong> and
                    field-tested SDKs to run offline or online in real-time
                  </div>
                </div>
              </div>
              <div class="iconbullet-wrap">
                <div class="icon-bullet-box">
                  <div class="iconfont icon-shaixuan"></div>
                </div>
                <div class="icon-bullet-text-wrap">
                  <div class="icon-bullet-li">
                    <strong
                      >Load balancing, burst and no burst, and always on</strong
                    >
                    without any custom engineering work
                  </div>
                </div>
              </div>
              <div class="tab-cta">
                <a href="/deploy" class="link-2"
                  >Explore Roboflow Deploy<span
                    class="iconfont icon-youjiantou"
                  ></span
                ></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--播放按钮-->
      <div class="tab-button-block">
        <a
          href="#"
          class="lightbox-link w-inline-block w-lightbox"
          aria-label="open lightbox"
          aria-haspopup="dialog"
          ><div class="rf-button">
            Watch Demo<span class="iconfont icon-bofang"></span>
          </div></a
        >
      </div>
    </div>
  </div>
</template>

<script>
/*引入视频轮播组件*/
import VideoCarousel from "@/components/VideoCarousel.vue";

export default {
  name: "SectionTow",
  data() {
    return {
      progress: 0,
      showProgressBar: 0, //进度条是否添加索引
      refreshKey: 0,
      /*视频地址*/
      videoPaths: [
        {
          url: "http://111.229.143.189:84/videos/video_collaboration.mp4",
          id: 0,
        },
        { url: "http://111.229.143.189:84/videos/video_data.mp4", id: 1 },
        { url: "http://111.229.143.189:84/videos/video_deployment.mp4", id: 2 },
        { url: "http://111.229.143.189:84/videos/video_labeling.mp4", id: 3 },
        { url: "http://111.229.143.189:84/videos/video_models.mp4", id: 4 },
      ],
      width: 597.6, //宽度
      height: 336.15, //高度
    };
  },
  components: { VideoCarousel },
  mounted() {
    this.startProgress();
    this.endlessLoop();
  },
  methods: {
    startProgress() {
      const interval = setInterval(() => {
        this.progress += 0.1;
        if (this.progress >= 100) {
          clearInterval(interval);
          setTimeout(() => {
            this.progress = 0; // 进度条达到 100 后延迟清零
            this.startProgress(); // 重新开始进度条
            this.showProgressBar += 1;
            if (this.showProgressBar >= 5) {
              this.showProgressBar = 0;
            }
          }, 10); // 延迟清零
        }
      }, 10); // 增加进度条
    },
    refreshChildComponent() {
      this.refreshKey += 1; // 更新 key 属性的值，强制重新渲染子组件
      //死循环
    },
    endlessLoop() {
      setTimeout(() => {
        this.refreshChildComponent();
        this.endlessLoop();
      }, 12000);
    },
  },
};
</script>

<style lang="less" scoped>
.section {
  padding-top: 30px;
  padding-bottom: 30px;
  .home-container {
    max-width: 1200px;
    //视频+文字
    .tabs-content-2 {
      overflow: visible;
      .tab-panel {
        .tab-grid {
          min-height: 500px;
          background-color: #f3f4f6;
          grid-template-rows: auto;
        }
        .w-layout-grid {
          grid-row-gap: 16px;
          grid-column-gap: 16px;
          grid-template-rows: auto auto;
          grid-template-columns: 1fr 1fr;
          grid-auto-columns: 1fr;
          display: grid;
        }
        .img-block {
          width: 597.6px;
          height: 336.15px;
          margin-top: 80px;
          margin-left: -50px;
          flex-direction: column;
          align-items: flex-end;
          display: flex;
          .hero-widget-container-edit {
            background-color: transparent;
            box-shadow: 5px 5px 15px #999999;
            border-radius: 15px;
            overflow: hidden;
          }
        }
        .content-block {
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          padding: 20px 50px 30px 10px;
          display: flex;
          .tab-card-heading {
            color: #111827;
            margin-top: 0;
            padding-right: 10px;
            font-size: 32px;
          }
          h2 {
            color: #111827;
            margin-top: 24px;
            margin-bottom: 16px;
            font-size: 40px;
            font-weight: 700;
            line-height: 1.2;
            position: static;
          }
          .iconbullet-wrap {
            padding-top: 10px;
            padding-bottom: 10px;
            display: flex;
            .icon-bullet-box {
              min-width: 20px;
              border-radius: 8px;
              flex: none;
              justify-content: center;
              align-items: center;
              color: #6706ce;
              margin-right: 18px;
              line-height: 1.6;
              display: flex;
              .icon-dui {
                font-size: 20px;
              }
              .icon-xingquan {
                font-size: 24px;
              }
              .icon-shaixuan {
                font-size: 24px;
              }
            }
            .icon-bullet-text-wrap {
              margin-left: 20px;
              .icon-bullet-li {
                color: #5d5959;
              }
            }
            .purple {
              color: #6706ce;
            }
          }
          .tab-cta {
            align-self: flex-end;
            margin-top: 20px;
            a {
              color: #6706ce;
              text-decoration: none;
              font-weight: 700;
              font-size: 16px;
              span {
                padding-left: 10px;
                font-size: 24px;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
    .w-tab-content {
      display: block;
      position: relative;
    }
    //播放按钮
    .tab-button-block {
      background-color: #e5e7eb;
      background-image: linear-gradient(#d1d5db, rgba(209, 213, 219, 0) 13%);
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      padding-top: 20px;
      padding-bottom: 20px;
      display: flex;
      .lightbox-link,
      .lightbox-link:hover {
        text-decoration: none;
      }

      .w-inline-block {
        max-width: 100%;
        display: inline-block;
      }
      a {
        color: #6706ce;
        font-weight: 700;
        text-decoration: none;
        display: flex;
        align-items: center;
        .rf-button {
          color: #fff;
          text-align: center;
          background-color: #6706ce;
          border: 1px solid #6706ce;
          border-radius: 4px;
          padding: 13px 0px 13px 20px;
          line-height: 1;
          text-decoration: none;
          span {
            font-size: 22px;
            padding-left: 10px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .w-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    .home-tabs-wrap {
      background-color: #f3f4f6;
      border-left: 1px solid #fcfafa;
      border-radius: 20px 20px 0 0;
      padding-bottom: 30px;
      .tabs-menu-home {
        max-width: 960px;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        padding-top: 30px;
        display: flex;
        .w-tab-link {
          vertical-align: top;
          text-align: left;
          cursor: pointer;
          color: #222;
          padding: 9px 30px;
          text-decoration: none;
          display: inline-block;
          position: relative;
        }
        .w-inline-block {
          max-width: 100%;
          display: inline-block;
        }
        .tab-button:hover {
          color: #6706ce;
          text-decoration: none;
        }
        .tab-button-active {
          color: #6706ce;
          text-decoration: none;
        }
        .tab-button {
          background-color: transparent;
          justify-content: center;
          align-items: center;
          margin-left: 30px;
          margin-right: 30px;
          padding-bottom: 16px;
          padding-left: 10px;
          padding-right: 10px;
          font-size: 15px;
          display: flex;
        }
        a {
          color: #6706ce;
          font-weight: 700;
          text-decoration: none;
          .fa_icon_reg {
            margin-right: 8px;
            font-size: 20px;
          }
          .load-bar-base {
            height: 4px;
            background-color: #e5e7eb;
            margin-left: auto;
            margin-right: auto;
            position: absolute;
            top: auto;
            bottom: 0%;
            left: 0%;
            right: 0%;
            .load-bar {
              width: 0%;
              height: 4px;
              background-color: #6706ce;
            }
          }
        }
      }
      .w-tab-menu {
        position: relative;
      }
      .w-tabs {
        position: relative;
      }
    }
  }
  .w-container:before,
  .w-container:after {
    content: " ";
    grid-area: 1/1/2/2;
    display: table;
  }
}
</style>
